<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存管理</title>
    <link rel="stylesheet" href="../shared/base.css">
    <link rel="stylesheet" href="product.css">
    <script src="../shared/jquery-3.7.1.js"></script>
    <script src="../shared/mustache-4.2.0.js"></script>
</head>
<body>
    <div class="container">
        <h2>库存列表</h2>
        <button class="create-btn" id="createProductBtn">创建记录</button>
        <dialog id="createDialog">
            <form id="createProductForm" method="dialog">
                <h3>创建新库存</h3>
                <div class="form-group">
                    <label for="productName">库存商品名称:</label>
                    <input type="text" id="productName" name="name" required>
                </div>
                <div class="form-group">
                    <label for="productPrice">价格:</label>
                    <input type="number" id="productPrice" name="price" step="0.01" required>
                </div>
                <div class="form-group">
                    <label for="productStock">库存:</label>
                    <input type="number" id="productStock" name="stock" required>
                </div>
                <div class="form-actions">
                    <button type="submit">保存</button>
                    <button type="button" id="cancelCreate">取消</button>
                </div>
            </form>
        </dialog>
        <table id="productTable" class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>价格</th>
                <th>库存</th>
                <th>创建时间</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tableBody">
            <!-- 数据将通过 JavaScript 动态生成 -->
            </tbody>
        </table>
        <!-- 分页信息 -->
        <div id="pagination" class="pagination">
            <!-- 分页信息将通过 JavaScript 动态生成 -->
        </div>
    </div>

    <!-- Mustache 模板 -->
        <script type="text/template" id="tableTemplate">
        {{#items}}
        <tr>
            <td>{{id}}</td>
            <td>{{name}}</td>
            <td>${{price}}</td>
            <td class="text-center">{{stock}}</td>
            <td>{{created_at_formatted}}</td>
            <td>{{updated_at_formatted}}</td>
            <td>
                <button class="delete-btn" data-id="{{id}}">删除</button>
                <button class="update-btn" data-id="{{id}}">更新</button>
            </td>
        </tr>
        {{/items}}
    </script>

    <script type="text/template" id="paginationTemplate">
        共 {{totalItems}} 条记录 | 第 {{currentPage}} 页/共 {{totalPages}} 页
    </script>
    <script src="product.js?_=123"></script>
</body>
</html>
